<!-- 页面部分逻辑有问题 不能套用 -->

<template> 
    <div>
  <div>
          <el-form :inline="true" :model="searchform"   class="demo-form-inline" style="display: flex;flex-wrap: wrap;margin-left: 10px; " >
            <el-form-item label="姓名"  >
              <el-input v-model="searchform.name" placeholder="姓名"></el-input>
            </el-form-item>
           <el-form-item label="在职状态">
              <el-select v-model="searchform.static" placeholder="在职状态">
                <el-option label="在职" value=1></el-option>
                <el-option label="离职" value=0></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门">
              <el-select v-model="searchform.pname" placeholder="部门">
              <template v-for="(item,index) in deptfrom">
                <el-option :label=item.pname :value=item.pid></el-option>
              </template>
              </el-select>
            </el-form-item>

         
          <el-form-item>
            <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit(1)">查询</el-button>
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="danger" @click="multipledelete">删除</el-button>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="adddialogFormVisible=true">添加用户</el-button>
            </el-form-item>
            
          </el-form>
        </div>
  
  
  
  
        <!-- 表格展示数据 -->
      
  <div>
    <template>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="370"
        >
 
        <!-- <el-table-column
          type="selection"
          width="50">
        </el-table-column> -->
        <el-table-column
          prop="name"
          label="姓名"
          width="100">
        </el-table-column>
    
        <el-table-column
        prop="post.pname"
        label="职位"
        width="100"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
      prop="entryTime"
      label="入职时间"
      width="100"
      show-overflow-tooltip>
    </el-table-column>
      <el-table-column
      prop="statename"
      label="在职状态"
      width="80"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
    prop="gender"
    label="性别"
    width="50"
    show-overflow-tooltip>
  </el-table-column>
  <el-table-column
  prop="address"
  label="地址"
  width="180"
  show-overflow-tooltip>
</el-table-column>
  <el-table-column
  prop="idcard"
  label="身份证号"
  width="150"
  show-overflow-tooltip>
  </el-table-column>
  <el-table-column
  prop="phone"
  label="电话号"
  width="100"
  show-overflow-tooltip>
  </el-table-column> 
  <el-table-column label="操作">
    <template slot-scope="scope" style="display: flex;">
      <el-button
        size="mini"
        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      <el-button
        size="mini"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
  </el-table-column>
      </el-table>
    
  
  
      <!-- digal对话框（模态框） -->
       <el-dialog title="修改数据" :visible.sync="dialogFormVisible" @close="cancelmod">
        <el-form :model="digalform">
          <el-form-item label="姓名" label-width="90px">
            <el-input v-model="digalform.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" label-width="90px">
            <el-input v-model="digalform.idcard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话号" label-width="90px">
            <el-input v-model="digalform.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="部门" label-width="90px">
            <el-select v-model="postname" placeholder="请选择活动区域">
                <template v-for="(item,index) in deptfrom">
                    <el-option :label=item.pname :value=item.pid></el-option>
                  </template>
            </el-select>
          </el-form-item>
     
          <el-form-item label="性别" label-width="90px">
            <el-select v-model="digalform.gender" placeholder="请选择活动区域">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="在职状态" label-width="90px">
            <el-select v-model="digalform.statename" placeholder="请选择活动区域">
              <el-option label="在职" value=1></el-option>
              <el-option label="离职" value=0></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelmod">取 消</el-button>
          <el-button type="primary" @click="modifydate">确 定</el-button>
        </div>
      </el-dialog>
  
  
      <!-- 添加数据模态框 -->
      <el-dialog title="添加职员" :visible.sync="adddialogFormVisible" @close="cancelmod">
        <el-form :model="addfrom">
          <el-form-item label="姓名" label-width="90px">
            <el-input v-model="addfrom.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" label-width="90px">
            <el-input v-model="addfrom.idcard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" label-width="90px">
            <el-input v-model="addfrom.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话号" label-width="90px">
            <el-input v-model="addfrom.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="入职时间" label-width="90px">
           

            <el-date-picker
            v-model="addfrom.entryTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          </el-form-item>

          
          <el-form-item label="部门" label-width="90px">
            <el-select v-model="addfrom.postId" placeholder="部门">
                <template v-for="(item,index) in deptfrom">
                  <el-option :label=item.pname :value=item.pid></el-option>
                </template>
                </el-select>
          </el-form-item>
        
          <el-form-item label="性别" label-width="90px">
            <el-select v-model="addfrom.gender" placeholder="请选择活动区域">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelmod">取 消</el-button>
          <el-button type="primary" @click="adddialogFormVisiblelist">确 定</el-button>
        </div>
      </el-dialog>
  
  
      <!-- /////分页功能未完成 -->
      
      <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      @current-change="nowpage"
      >
    </el-pagination>

    </template>
  </div>
  
  
  
  
  </div>
    </template>
    <script>
      import qs from 'qs'
    export default{
      data(){
       
        return{
          searchform: {
           name:'',
           gender:'',
           static:'',
           pname:""
          },
          tableData: [  ],
          multipleSelection: [],
         
          dialogTableVisible: false,
          dialogFormVisible: false,
          adddialogFormVisible:false,
          digalform: {
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            dept:'的相对开明',
            statu:'到曾',
            gender:'男',
            idcard:'472eirroie',
            phone:'12934798',
            edu:'本科',
          },
          addfrom: {
          },
  
  
          deptfrom:[],
  
          deufrom:[],
          value1:"",
          postname:""
      
         
      
      }},
      created(){
        console.log("222222222222")
        this.deptlisteven()
        //  this.stafflisteven(1)
        this.onSubmit(1)
         },
    
      
  
  
      methods:{
        nowpage(e){
          console.log(e)
          this.onSubmit(e)

        },


        //添加用户
        adddialogFormVisiblelist(){
            console.log(this.addfrom)
            if(this.addfrom.entryTime){
                this.addfrom.entryTime=this.timestampToTime(this.addfrom.entryTime,1)
            }
        

      
     this.axios({
               url:this.$api+'/staff/insertStaff', 
               dataType:"json",
              method:'get',
              params:this.addfrom     
            }).then(res=>{
                console.log(res)
              if(res.data==1){
                this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.adddialogFormVisible=false;
            this.onSubmit(1);
              }
              console.log(res)
             }).catch(res=>{
              console.log(res)
            })
   
  
        },
  
    //  获取部门信息
    deptlisteven(){
        console.log("部门列表")
      this.axios.get(this.$api+"/post/selectAll")
          .then((res)=>{
         console.log(res.data)
         this.deptfrom=res.data
        }).catch((err)=>{
        console.log(err)
        })
  
    },
  


  
      // 查询
        onSubmit(index) {
            
          if(!index){
            index=1
          }
          var pagenum=index
          
            var time1=""
            var time2=""
            console.log(this.value1)
       
            if(this.value1){
              
                time1 =this.timestampToTime(this.value1[0],1)
                time2=this.timestampToTime(this.value1[1],1)
            }
     
       console.log(pagenum)
          
          // 这两个一直是字符串 转为为数字
           var staticlis=this.searchform.static==""?null:parseInt(this.searchform.static);
           console.log(staticlis)
          this.axios.get(this.$api+"/staff/select",
         {
          params:{
            name:this.searchform.name,
            postId:this.searchform.pname,
            status:staticlis,
            entryTime1:time1,
            entryTime2:time2,
            pageNum:pagenum

             }
         } )
          .then((res)=>{
           console.log(res)

           console.log(res)
            // tableData
            var item=res.data
            for(var i=0;i<item.length;i++){
                if(item[i].status==1){
                    item[i]["statename"]="在职"
                }
                else{
                    item[i]["statename"]="离职"
                }
            }
            this.tableData=item
           console.log(this.tableData)
  
     
     
        }).catch((err)=>{
         
        console.log(err)
        })
        },
  
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        // 编辑模态框
        handleEdit(index, row) {
          //点击编辑按钮后 将点击的那行数据转给模态框里
          this.digalform=row 
          if(this.digalform.gender==1){
            this.digalform.gender="男"
          }
          if(this.digalform.gender==0){
            this.digalform.gender="女"
          }
          this.postname=row.post.pname

          this.dialogFormVisible=true
        },
        //删除数据
        handleDelete(index, row) {
          console.log(row.sid)
          this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
      
            this.axios({
             url:this.$api+"/staff/updateByState", 
             dataType:"json",
            method:'get',
            params:{
                sId:row.sid,
                state:0
              }         
          })
          .then((res)=>{
            console.log(res)
          if(res.data>0){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
  
            this.onSubmit(1);
          }
     
        }).catch((err)=>{
         
        console.log(err)
        })
          
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
       
        },
        //修改数据
        modifydate(){
           
           console.log(this.digalform)
         
           var postid=this.postname
           console.log(postid)
      
       var status=this.digalform.statename

       if(typeof(this.postname)=="string"){
        postid=this.digalform.post.pid
       }
        if(status=="离职"){
            status=0
        }
        if(status=="在职"){
            status=1
        }
          
          this.$confirm('是否确定修改数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
  
            this.axios.get(this.$api+"/staff/updateByDynamic",
         {
          params:{
            sId:this.digalform.sid,
            name:this.digalform.name,
            gender:this.digalform.gender,
            entryTime:this.digalform.entryTime,
            status:status,
            phone:this.digalform.phone,
            address:this.digalform.address,
            idcard:this.digalform.idcard,
            postId:postid,
             }
         } )
          .then((res)=>{
           
           if(res.data>0){
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.onSubmit(1)
          this.dialogFormVisible=false
  
           }
     
        }).catch((err)=>{
         
        console.log(err)
        })
          
          }).catch(() => {
         
            this.$message({
              type: 'info',
              message: '取消修改'
            });    
                 
          });  
        },
  
       
  
        // 取消修改数据(也需要刷新一下页面)
        cancelmod(){
          console.log("888888888888")
          this.onSubmit(1)
          this.dialogFormVisible=false
  
        },
  
  
  
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },

    //日期格式
    timestampToTime(times,num) {
     //num是判断是否返回时分秒 num=1为不传时分秒 num=2返回时分秒
    times=times.toLocaleString('en-US',{hour12: false}).split(" ")
    let time = times[1]
    let mdy = times[0]
    mdy = mdy.split('/')
    let month = parseInt(mdy[0]);
    let day = parseInt(mdy[1]);
    let year = parseInt(mdy[2])
    if(month<10){
        console.log(month)
        month="0"+month
      
    }
    if(day<10){
        day="0"+day
    }

    //是否传回时分秒 num=1为不传时分秒 num=2返回时分秒
  if(num==1){
    return  year + '-' + month + '-' + day 
  }
  else{
    return  year + '-' + month + '-' + day + ' ' + time
  }
 
   

},
      }
    }
    
    </script>
     <style lang="less" scoped>
  
  
    </style>
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  